@extends('admin.base')

@section('content')
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <div class="layui-btn-group ">
                @can('system.permission.destroy')
                    <button class="layui-btn layui-btn-danger" id="listDelete">删 除</button>
                @endcan
                @can('system.permission.create')
                    <a class="layui-btn" href="{{ route('admin.permission.create') }}">添 加</a>
                @endcan
                    <button class="layui-btn layui-btn-normal" id="openAll">全部展开/折叠</button>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="dataTable" lay-filter="dataTable"></table>
            
            <script type="text/html" id="icon">
                <i class="layui-icon @{{ d.icon.class }}"></i>
            </script>

        </div>
    </div>
@endsection

@section('script')
    @can('system.permission')
    <script>
        layui.extend({
            treeGrid: 'lib/extend/treeGrid'
        }).use(['jquery','layer','table','form','treeGrid'],function () {
            var $=layui.jquery;
            var treeGrid = layui.treeGrid; //很重要
            var layer = layui.layer;

            var ptable = treeGrid.render({
                id: "dataTable"
                , elem: '#dataTable'
                , url: "{{ route('admin.data') }}?model=permission"
                , cellMinWidth: 100
                , idField: 'id' //必須字段
                , treeId: 'id' //树形id字段名称
                , treeUpId: 'parent_id' //树形父id字段名称
                , treeShowName: 'display_name' //以树形式显示的字段
                , heightRemove: [".dHead", 10, 100] //不计算的高度,表格设定的是固定高度，此项不生效
                , height: '100%'
                , isFilter: false
                , iconOpen: true //是否显示图标【默认显示】
                , isOpenDefault: false //节点默认是展开还是折叠【默认展开】
                , loading: true
                , method: 'get'
                , isPage: false
                , cols: [[
                    {checkbox: true}
                    , {field: 'id', title: 'ID', sort: true, width: 60}
                    , {field: 'display_name', title: '权限名称', width: 200}
                    , {field: 'name', title: '权限值', width: 220}
                    , {field: 'route', title: '路由', width: 220}
                    , {field: 'icon_id', title: '图标', toolbar: '#icon', width: 60}
                    , {field: 'sort', title: '排序', width: 60}
                    , {field: 'updated_at', title: '更新时间', width: 160}
                    , {title: '操作', width: 150, align: 'center', /*toolbar: '#options', */ templet: function(d){
                        var editBtn,delBtn;
                        @can('system.permission.edit')
                        var editBtn = '<a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>';
                        @endcan
                        @can('system.permission.destroy')
                        var delBtn = '<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>';
                        @endcan

                        return editBtn+delBtn;
                    }}
                ]]
                , parseData: function (res) {//数据加载后回调
                    return res;
                }
                , onClickRow: function (index, o) {
                    //console.log(index, o, "单击！");
                }
                , onDblClickRow: function (index, o) {
                    //console.log(index, o, "双击");
                }
                , onCheck: function (obj, checked, isAll) {//复选事件
                    //console.log(obj, checked, isAll);
                }
                , onRadio: function (obj) {//单选事件
                    //console.log(obj);
                }
            });

            //监听工具条
            treeGrid.on('tool(dataTable)', function (obj) { //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'del') {
                    layer.confirm('确认删除吗？', function (index) {
                        $.post("{{ route('admin.permission.destroy') }}", {
                            _method: 'delete',
                            ids: [data.id]
                        }, function (result) {
                            if (result.code == 0) {
                                obj.del(); //删除对应行（tr）的DOM结构
                            }
                            layer.close(index);
                            layer.msg(result.msg, {icon: 6})
                        });
                    });
                } else if (layEvent === 'edit') {
                    location.href = '/admin/permission/' + data.id + '/edit';
                }
            });

            //按钮批量删除
            $("#listDelete").click(function () {
                layer.msg("由于权限重要性，系统已禁止批量删除",{icon:5});
                /*
                var ids = [];
                var hasCheck = treeGrid.checkStatus('dataTable')
                var hasCheckData = hasCheck.data;
                if (hasCheckData.length>0){
                    $.each(hasCheckData,function (index,element) {
                        ids.push(element.id)
                    })
                }
                //console.log(ids);
                if (ids.length>0){
                    layer.confirm('确认删除吗？', function(index){
                        $.post("{{ route('admin.permission.destroy') }}",{_method:'delete',ids:ids},function (result) {
                            if (result.code==0){
                                dataTable.reload()
                            }
                            layer.close(index);
                            layer.msg(result.msg,{icon:6})
                        });
                    })
                }else {
                    layer.msg('请选择删除项',{icon:5})
                }*/
            });

            //展开、折叠
            $("#openAll").click(function () {
                var treeData = treeGrid.getDataTreeList("dataTable");
                treeGrid.treeOpenAll("dataTable", !treeData[0][treeGrid.config.cols.isOpen]);
            })
        })
    </script>
    @endcan
@endsection